<div data-role="content" style="width:50%; float: left;">
<h3 style="font-weight:normal">Repartim el pagament de <span style="font-weight:bold" class="green"><?php echo sprintf("%01.2f", $_POST['import'] ); ?>&euro;</span></h3>
<h2 style="font-weight:bold"><?php echo $_POST['subject']; ?></h2>

</div>
<div data-role="content" style="width:40%;">
<img src="images/money.png" style="float:right;" />
</div>
<form method="post" action="request.php">
<div data-role="content" id="sliderdiv">
    <img src="images/contacts/001.jpg" style="float:left;margin-top:10px;margin-right:10px;" /><h2> Laura Belmonte: <span id="euros0" class="green"><?php echo sprintf("%01.2f", $_POST['import']/3 ); ?>&euro;</span></h2><label for="sliders[0]" class="ui-hidden-accessible">Laura Belmonte</label>
    <input type="range" class="importe" name="sliders[0]" id="sliders[0]" value="<?php echo $_POST['import']/3; ?>" min="0" max="<?php echo $_POST['import']; ?>" step="0.10" data-highlight="true" data-mini="true" />
    <br /><br />
    <img src="images/contacts/004.jpg" style="float:left;margin-top:10px;margin-right:10px;" /><h2> Oriol Pérez: <span id="euros1" class="green"><?php echo sprintf("%01.2f", $_POST['import']/3 ); ?>&euro;</span></h2><label for="sliders[1]" class="ui-hidden-accessible">Oriol Pérez</label>
    <input type="range" class="importe" name="sliders[1]" id="sliders[1]" value="<?php echo $_POST['import']/3; ?>" min="0" max="<?php echo $_POST['import']; ?>" step="0.10" data-highlight="true" data-mini="true" />
    <br /><br />
    <img src="images/contacts/007.jpg" style="float:left;margin-top:10px;margin-right:10px;" /><h2> Erica Toledano: <span id="euros2" class="green"><?php echo sprintf("%01.2f", $_POST['import']/3 ); ?>&euro;</span></h2><label for="sliders[2]" class="ui-hidden-accessible">Erica Toledano</label>
    <input type="range" class="importe" name="sliders[2]" id="sliders[2]" value="<?php echo $_POST['import']/3; ?>" min="0" max="<?php echo $_POST['import']; ?>" step="0.10" data-highlight="true" data-mini="true" />
    <input type="hidden" name="step" value="confirm" />
    <input type="hidden" name="subject" value="<?php echo $_POST['subject']; ?>" />
    <input type="hidden" name="amount" value="<?php echo sprintf("%01.2f", $_POST['import'] ); ?>" />
    <?php $ii = 0; foreach( $users as $user ) { ?>
    <input type="hidden" name="emails[<?php echo $ii; ?>]" value="<?php echo $user; ?>" />
    <?php $ii++; } ?>
</div>
<script type="text/javascript">
var total = <?php echo sprintf("%01.2f", $_POST['import'] ); ?>;
var numsliders = 1;
var locked = new Array();

$(document).bind('pageinit', function() {
  numsliders = $(".importe").length;

  $('#sliderdiv > input').hide();
	
	$(".importe").each( function(i) {
	  $(this).bind( "change", function(event, ui) { updateSlider( event, ui ); });
	});
});

function updateSlider( event, ui ) {
	var totalLocked = 0;
	$(".importe").each( function(i) {
		if( ( jQuery.inArray(this.id, locked) != -1 ) || this.id == event.target.id ) {
			totalLocked += roundNumber( parseFloat( $(this).val() ), 2 );
		}
	});
	  $(".importe").each( function(i) {
		  if( this.id != event.target.id && jQuery.inArray(this.id, locked) == -1 ) {
			  $(this).unbind( "change");
			  //alert( total );
			  console.log( totalLocked );
			  //alert( event.target.value );
			  //alert( numsliders );
			  //alert( locked.length );
			  $(this).val( roundNumber( ( total - totalLocked )/(numsliders - locked.length ), 2 ) );
			  $(this).slider("refresh");
			  $(this).bind( "change", function(event, ui) { updateSlider( event, ui ); });
			  $('#euros'+i).text( roundNumber( ( total - totalLocked )/(numsliders - locked.length ), 2 )+'€' );
		  }
		  else {
			  if( jQuery.inArray(this.id, locked) == -1 ) {
				  locked.push( this.id )
			  }
			  console.log( locked );
			  $('#euros'+i).text( roundNumber( event.target.value, 2 )+'€' );
		  }
	  }); 
}

function roundNumber(num, dec) {
	  var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
	  return result;
}
</script>
<div data-role="footer" data-position="fixed" data-inline="false">
  <input type="submit" data-role="button" data-theme="b" data-icon="arrow-r" data-iconpos="right" data-inline="false" value="Pas següent">
</div>
</form>